# vue 2.0+ API

[TOC]

# 全局配置


Vue.config是一个对象,包含Vue的全局配置。可以在启动应用之前修改下列属性:

# silent

  • 类型boolean

  • 默认值false

  • 用法

    Vue.config.silent = true
    

    取消Vue所有的日志与警告。:smile

# optionMergeStrategies

  • 类型:{ [key: string]: Function }

  • 默认值:{}

  • 用法:

    Vue.config.optionMergeStrategies._my_option = function (parent, child, vm) {
        return child  + 1
    }
    
    const Profile = Vue.extend( {
         _my_option: 1
    })
    //Profile.options._my_option = 2
    

    自定义合并策略的选项。

    合并策略选项分别接收在父实例和子实例上定义的该选项的值作为第一个和第二个参数,Vue实例上下文被作为第三参数传入。

# devtools

  • 类型boolean

  • 默认值true(生产版为false)

  • 用法

    //务必在加载 Vue 之后,立即同步设置以下内容
    Vue.config.devtools = true
    

    配置是否允许 vue-devtools 检查代码。开发版本默认为true,生产版本默认为false。生产版本设为true可以启用检查。

# errorHandler

  • 类型Function

  • 默认值undefined

  • 用法

    Vue.config.errorHandler = function (err, vm, info) {
        //handle error
        //`info` 是 Vue 特定的错误信息,比如错误所有的生命周期钩子
        // 只有在 2.2.0+可用
    }
    

    指定组件的渲染和观察期间未捕获错误的处理函数。这个处理函数被调用时,可获取错误信息和Vue实例。

    从 2.2.0 起,这个钩子也会捕获组件生命周期钩子里的错误。同样的,当这个钩子是 undefined时,被捕获的错误会通过console.error输出而避免应用崩溃。

    从 2.4.0 起,这个钩子也会捕获Vue自定义事件处理函数内部的错误了。

    从 2.6.0 起,这个钩子也会捕获v-onDOM监听器内部抛出的错误。另外,如果任务被覆盖的钩子或处理函数返回一个 Promise 链(例如async函数),则来自其 Promise 链的错误也会被处理。

    错误追踪服务 Sentry (opens new window)Bugsnag (opens new window)都通过此选项提供了官方支持。

# warnHandler

  • 类型Function

  • 默认值undefined

  • 用法

    Vue.config.warnHandler = function (msg, vm, trace) {
        // `trace` 是组件的继承关系追踪
    }
    

    为 Vue 的运行时警告赋予一个自定义处理函数。注意这只会在开发者环境下生效,在生产环境下会被忽略。

# ingoredElements

  • 类型Array<string | RegExp

  • 默认值:[]

  • 用法

    Vue.config.ingoredElements = [
        'my-custom-web-component',
        'another-web-component',
        // 用一个 ‘RegExp’ 忽略所有 "icon-"开头的元素
        // 公在 2.5+ 支持
         /^icon-/
    ]
    

    须使 Vue 忽略在 Vue 之外的自定义元素(e.g. 使用了 Web components APIs)。否则,它会假设你忘记注册全局组件或者拼错了组件名称,从而抛出一个关于Unknow custom element的警告。

# keyCodes

  • 类型{ [key:string]: number | Array<number> }

  • 默认值{}

  • 用法

    Vue.config.keyCodes = {
        v: 86,
        f1: 112,
        // camelCase 不可用
        mediaPlayPause: 179,
        // 取而代之的是 kebab-case 且用双引号括起来
        “media-play-pause”:179,
        up: [38, 87]
    }
    
    <input type="text" @keyup.media-play-pause="method">
    

    v-on自定义键位别名。

# performance

2.2.0 新增

  • 类型boolean
  • 默认值false (自 2.2.3 起)
  • 用法: 设置为true以在浏览器开发工具的性能/时间线面板中启用对组件初始化、编译、渲染和打补丁的性能追踪。只适用于开发模式和支持performance.markAPI的浏览器上。

# productionTip

2.2.0 新增

  • 类型boolean
  • 默认值true
  • 用法: 设置为false以阻止 vue 在启动时生成生产提示。

# 全局API


# Vue.extend( options )

  • 参数

    • {Object} options
  • 用法: 使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。 data选项是特例,需要注意 - 在Vue.extend()中它必须是函数。

    <div id="mount-point"></div>
    
    // 创建构造器
    var Profile = Vue.extend({
        template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
        data: function () {
            return {
                firstName: 'Walter',
                lastName: 'White',
                alias: 'Heisenberg'
            }
        }
    })
    // 创建 Profile 实例,并挂载到一个元素上。
    new Profile().$mount('#mount-point')
    

    结果如下:

    <p>Walter White aka Heisenberg</p>
    
  • 参考组件 (opens new window)

# Vue.nextTick( [callback,context] )

  • 参数

    • {Function} [callback]
    • {object} [context]
  • 用法: 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的DOM。

    // 修改数据
    vm.msg = 'Hello'
    // DOM 还没有更新
    Vue.netxtTick(function () {
        // DOM 更新了
    })
    
    // 作为一个 Promise 使用 (2.1.0)
    Vue.nextTick().then(function () {
        // DOM 更新了
    })
    

    2.1.0 起新增:如果没有提供回调且在支持 Promise的环境中,则返回一个 Promise。请注意 Vue 不自带 Promise 的 polyfill,所以如果你的目标浏览器不原生支持 Promise (IE:你们都看我干嘛),你得自己提供 polyfill。

  • 参考异步更新队列 (opens new window)

# Vue.set( target, key, value)

  • 参数

    • {Object | Array} target
    • {string | number} key
    • {any} value
  • 返回值:设置的值。

  • 用法: 向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性(比如 this.myObject.newProperty = 'hi'

    注意对象不能是 Vue 实例,或者 Vue 实例的根数据对象。

# Vue.delete( target, key )

  • 参数

    • {Object | Array} target
    • {string | number} key/index

    仅在 2.2.0+版本中支持 Array + index用法

  • 用法

    删除对象的属性。如果对象是响应式的,确保删除能触发更新视图。这个方法主要用于避开 Vue 不能检测到属性被删除的限制,但是你应该很少会使用它。

    在 2.2.0+ 中同样支持在数据上工作

    目标对象不能是一个 Vue 实例或 Vue 实例的根数据对象。

# Vue.directive( id, [definition] )

  • *参数

    • {string} id
    • {Function | Object} [definition]
  • 用法

    注册或获取全局指令。

    // 注册
    Vue.derective('my-directive', {
        bind: function () {},
        inserted: function () {}update: function () {},
        componentUpdated: function () {},
        unbind: function () {}
    })
    
    // 注册 (指令函数)
    Vue.directive('my-directive', function () {
        // 这里将会被 'bind' 和 'update' 调用
    })
    
    // getter, 返回已注册的指令
    var myDirective = Vue.directive('my-directive')
    
  • 参考自定义指令 (opens new window)

# Vue.filter( id, [definition])

  • 参数

    • {string} id
    • {Function} [definition]
  • 用法: 注册或获取全局过滤器。

    // 注册
    Vue.filter('my-filter', function (value){
        // 返回处理后的值
    })
    
    // getter,返回已注册的过滤器
    var myFilter = Vue.filter('my-filter')
    
  • 参考过滤器 (opens new window)

# Vue.component( id, [definition] )

  • 参数

    • {string} id
    • {Function | Object} [definition]
  • 用法: 注册或获取全局组件。注册还会自动使用给定的id设置组件的名称。

    // 注册组件,传入一个扩展过的构造器
    Vue.component('my-component',Vue.extend({
        /* ... */
    }))
    
    // 注册组件,传入一个选项对象 (自动调用 Vue.extend)
    Vue.component('my-component',{
        /* .. */
    })
    
    // 获取注册的组件(始终返回构造器)
    var MyComponent = Vue.component('my-component')
    
  • 参考组件 (opens new window)

# Vue.use( plugin )

  • 参数

    • {Object | Function} plugin
  • 用法: 安装Vue.js插件。如果插件是一个对象,必须提供install方法。如果插件是一个函数,它会被作为install方法。install方法调用时,会将 Vue 作为参数传入。

    该方法需要在调用 new Vue() 之前被调用。

    install 方法被同一个插件多次调用,插件将只会被安装一次。

  • 参考插件 (opens new window)

# Vue.mixin( mixin )

  • 参数

    • {Object} mixin
  • 用法

    全局注册一个混入,影响注册之后所有创建的每个 Vue 实例。插件作者可以使用混入,向组件注入自定义的行为。不推荐在应用代码中使用

  • 参考全局混入 (opens new window)

# Vue.compile( template )

  • 参数

    • {string} template
  • 用法

    在 render 函数中编译模板字符串。只在独立构建时有效

    var res = Vue.compile('<div><span>{{msg }}</span></div>')
    
    new Vue({
        data: {
            msg: 'hello'
        },
        render: res.render,
        staticRenderFns: res.staticRenderFns
    })
    

    参考渲染函数 (opens new window)

# Vue.observable( object )

2.6.0 新增

  • 参数

    • {Object} object
  • 用法: 让一个对象可响应。Vue 内部会用它来处理 data 函数返回的对象。

    返回的对象可以直接用于==渲染函数==和==计算属性==内,并且会在发生改变时触发相应的更新。也可以作为最小化的跨组件状态存储器,用于简单的场景:

    const state = Vue.observable({ count: 0 })
    const Demo = {
        render(h) {
            return h('button', {
                on: { click: () => { state.count++ }}
            }, `count is: ${state.count}`)
        }
    }
    

    在 Vue 2.x 中,被传入的对象会直接被 Vue.observable改变,所以如这里展示的,它和被返回的对象是同一个对象。在Vue 3.x中,则会返回一个可响应的代理,而对源对象直接进行修改仍然是不可响应的。因此,为了向前兼容,我们推荐始终操作使用 Vue.observable 返回的对象,而不是传入源对象。

  • 参考深入响应式原理 (opens new window)

# Vue.version

  • 细节:提供字符串形式的 Vue 安装版本号。这对社区的插件和组件来说非常有用,你可以根据不同的版本号采取不同的策略。

  • 用法

    var version = Number(Vue.version.split('.')[0])
    
    if (version === 2) {
        //Vue v2.x.x
    } else if (version === 1) {
        //Vue v1.x.x
    } else {
        // Unsupported versions of vue
    }
    

# 选项/数据


# data

  • 类型Object | Function

  • 限制:组件的定义只接受 function

  • 详细: Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter,从而让 data 的属性能够响应数据变化。对象必须是纯粹的对象(含有零个或多个的key/value对):浏览器 API 创建的原生对象,原型上的属性会被忽略。大概来说,data 应该只能是数据 - 不推荐观察拥有状态行为的对象。

    一旦观察过,不需要再次在数据对象上添加响应式属性。因此推荐在创建实例之前,就声明所有的根级响应式属性。

    实例创建之后,可以通过 vm.$data 访问原始数据对象。Vue 实例也代理了 data 对象上所有的属性,因此访问 vm.a 等价于访问 vm.$data.a

    _$开头的属性不会被 Vue实例代理,因为它们可能和 Vue 内置的属性、API方法冲突。你可以使用例如 vm.$data._property的方式访问这些属性。

    当一个组件被定义,data必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例。如果data仍然是一个纯粹的对象,则所有的实例将共享引用同一个数据对象!通过提供data函数,每次创建一个新实例后,我们能够调用data函数,从而返回初始数据的一个全新副本数据对象。

    如果需要,可以通过将vm.$data传入JSON.parse(JSON.stringify(...))得到深拷贝的原始数据对象。

  • 示例

    var data = { a: 1 }
    
    // 直接创建一个实例
    var vm = new Vue({
        data: data
    })
    vm.a // => 1
    vm.$data === data // => true
    
    // Vue.extend() 中 data 必须是函数
    var Component = Vue.extend({
        data: function () {
            return { a: 1 }
        }
    })
    

    注意,如果你为data属性使用了箭头函数,则this不会指向这个组件的实例,不过你仍然可以将其实例作为函数的第一个参数来访问。

    data: vm => ({ a: vm.myProp })
    
  • 参考深入响应式原理 (opens new window)

# props

  • 类型Array<string> | Object

  • 详细: props 可以是数组或对象,用于接收来自父组件的数据。props 可以是简单的数组,或者使用对象作为替代,对象允许配置高级选项,如类型检测、自定义校验和设置默认值。

  • 示例

    // 简单语法
    Vue.component('props-demo-simple', {
        props: ['size', 'myMessage']
    })
    
    // 对象语法,提供校验
    Vue.component('props-demo-advanced',{
        props: {
            // 检测类型
            height; Number,
            // 检测类型 + 其他验证
            age: {
              type: Number,
              default: 0,
              required: true,
              validator: function (value) {
        		 return value >= 0
    			}
             }
        }
    })
    
  • 参考Props (opens new window)

# propsData

  • 类型{ [key: string]: any }

  • 限制:只用于new创建的实例中。

  • 详细: 创建实例时传递props。主要作用是方便测试。

  • 示例

    var Comp = Vue.extends({
        props: ['msg'],
        template: '<div>{{msg }}</div>'
    })
    
    var vm = new Comp({
        propsData: {
            msg: 'hello'
        }
    })
    

# computed

  • 类型{ [key: string]: Function | { get: Function, set: Function}}

  • 详细: 计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。

    注意如果你为一个计算属性使用了箭头函数,则this不会指向这个组件的实例,不过你仍然可以将其实例作为函数的第一个参数来访问。

    computed: {
        aDouble: vm => vm.a* 2
    }
    

    计算属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。注意,如果某个依赖(比如非响应式属性)在该实例范畴之外,则计算属性是不会被更新的。

  • 示例

    var vm = new Vue({
        data: { a: 1 },
        computed: {
            // 仅读取
            aDouble: function () {
                return this.a * 2
            },
            // 读取和设置
            aPlus: {
                get: function () {
                    return this.a + 1
                },
                set: function (v) {
                    this.a = v - 1
                }
            }
        }
    })
    vm.aPlus // => 2
    vm.aPlus = 3
    vm.a     // => 2
    vm.aDouble // => 4
    
  • 参考计算属性 (opens new window)

# methods

  • 类型{ [key: string]: Function }

  • 详细: methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法,或者在指令表达式中使用。方法中的this自动绑定为 Vue 实例。

    注意,不应该使用箭头函数来定义method函数(例如plus:()=>this.a++)。理由是箭头函数绑定了父级作用域的上下文,所以this将不会按照期望指向 Vue 实例,this.a将是 undefined。

  • 示例

    var vm = new Vue({
        data: { a: 1 },
        methods: {
            plus: function () {
                this.a++
            }
        }
    })
    vm.plus()
    vm.a // 2
    
  • 参考事件处理器 (opens new window)

# watch

  • 类型{ [key: string]: string | Function | Object | Array }

  • 详细

    一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue 实例将会在实例化时调用 $watch,遍历 watch 对象的每个属性。

  • 示例

    var vm = new Vue({
        data: {
            a: 1,
            b: 2,
            c: 3,
            d: 4,
            e: {
                f: {
                    g: 5
                }
            }
        },
        watch: {
            a: function (val, oldVal) {
                console.log('new: %s, old: %s', val, oldVal)
            },
            // 方法名
            b: 'someMethod',
            // 深度 watcher
            c: {
                handler: function (val, oldVal){ /* ... */ },
                deep: true
            },
            // 该回调将会在侦听开始之后被立即调用
            d: {
                handler: function (val, oldVal) { /* ... */ },
                immediate: true
            },
            e: [
                'handle1',
                function hande2 (vall, oldVal) { /* ... */ },
                {
                    handler: function handle3 (val, oldVal) { /* ... */ },/* ... */
                }
            ],
            //watch wm.e.f's value: {g: 5}
            'e.f': function (val, oldVal) { /* ... */}
        }
    })
    vm.a = 2 // => new: 2, old: 1
    

    注意,不应该使用箭头函数来定义 watcher 函数(例如searchQuery:newValue =>this.updateAutocomplete(newValue))。理由是箭头函数绑定了父级作用域的上下文,所以this将不会按照期望指向 Vue 实例,this.updateAutocomplete将是 undefined。

  • 参考实例方法/数据-vm.$watch (opens new window)

# 选项/DOM

# el

  • 类型string | Element

  • 限制:只在由new创建的实例中遵守。

  • 详细: 提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器,也可以是一个 HTMLElement 实例。

    在实例挂载之后,元素可以用vm.$el访问。

    如果在实例化时存在这个选项,实例将立即进入编译过程,否则,需要显式调用vm.$mount()手动开启编译。

    提供的元素只能作为挂载点。不同于 Vue 1.x,所有的挂载元素会被 Vue 生成的 DOM 替换。因此不推荐挂载 root 实例到 html或者 <body>上。

    如果render函数和template属性都不存在,挂载 DOM 元素的 HTML 会被提取出来用作模板,此时,必须使用 Runtime + Compiler 构建的 Vue 库

  • 参考

# template

  • 类型string

  • 详细: 一个字符串模板作为 Vue 实例的标识使用。模板将会替换挂载的元素。挂载元素的内容都将被忽略,除非模板的内容有分发插槽。

    如果值以#开始,则它将被用作选择符,并使用匹配元素的innerHTML作为模板。常用的技巧是用<script type="x-template">包含模板。

    出于安全考虑,你应该只使用你信任的 Vue 模板。避免使用其它人生成的内容作为你的模板。

    如果 Vue 选项中包含渲染函数,该模板将被忽略。

  • 参考

# render

  • 类型(createElement: () => VNode) => VNode

  • 详细

    字符串模板的代替方案,允许你发挥 JavaScript 最大的编程能力,该渲染函数接收一个createElement方法作为第一个参数用来创建VNode

    如果组件是一个函数组件,渲染函数还会接收一个额外的context参数,为没有实例的函数组件提供上下文信息。

    Vue 选项中的render函数若存在,则 Vue 构造函数不会从 template 选项或通过 el选项指定的挂载元素中提取出 HTML 模板编译渲染函数。

  • 参考:渲染函数

# randerError

2.2.0 新增

  • 类型(createElement: () => VNode, error: Error) => VNode

  • 详细只在开发者环境下工作。render函数遭遇错误时,提供另外一种渲染输出。其错误将会作为第二个参数传递到renderError。这个功能配合 hot-reload 非常实用。

  • 示例

    new Vue({
        render (h) {
            throw new Error('oops')
        },
        renderError (h, err) {
            return h('pre',{ style: { color: 'red' }}, err.stack)
        }
    }).$mount('#app')
    
  • 参考渲染函数 (opens new window)

# 选项/生命周期钩子

所有的生命周期钩子自动绑定this上下文到实例中,因此你可以访问数据,对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法(例如created: () => this.fetchTodos())。这是因为箭头函数绑定了父上下文,因此this与你期待的 Vue 实例不同,this.fetchTodos的行为未定义。

# beforeCreate

# created

  • 类型Function
  • 详细: 在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el属性目前不可见。

# beforeMount

  • 类型:Function
  • 详细: 在挂载开始之前被调用:相关的render函数首次被调用。 该钩子在服务器渲染期间不被调用
  • 参考生命周期图示 (opens new window)

# mounted

  • 类型Function

  • 详细el被新创建的vm.$el替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当mouted被调用时vm.$el也在文档内。 注意mounted不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以用 vm.$nextTick 替换掉 mounted

    mounted: function () {
        this.$nextTick(function () {
            // Code that will run only after the
            //entire view has been renderdd
        })
    }
    
    

    该钩子在服务器端渲染期间不被调用

  • 参考生命周期图示 (opens new window)

# beforeUpdate

  • 类型Function

  • 详细: 数据更新时调用,发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器。

    该钩子在服务器渲染期间不被调用,因为只有初次渲染会在服务端进行

  • 参考生命周期图示 (opens new window)

# updated

  • 类型Function

  • 详细: 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。

    当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态。如果要相应状态改变,通常最好使用计算属性watcher 取而代之。

    注意update不会承诺所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕,可以用vm.$nextTick替换掉updated

    update: function () {
        this.$nextTick(function (){
            // Code that will run only after the
            // entire view has been re-rendered
        })
    }
    

    该钩子在服务器端渲染期间不被调用

# activated

# deactivated

# beforeDestroy

  • 类型Function

  • 详细: 实例销毁之前调用。在这一步,实例仍然完全可用。

    该钩子在服务器端渲染期间不被调用。

# destroyed

  • 类型Function

  • 详细: Vue 实例销毁后调用。调用后,Vue实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

    该钩子在服务器端渲染期间不被调用。

# errorCaptured

2.5.0+ 新增

  • 类型(err: Error, vm: Component, info: string) => ?boolean

  • 详细: 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回fasle以阻止该错误继续向上传播。

    你可以在此钩子中修改组件的状态。因此在模板或渲染函数中设置其它内容的知足条件非常重要,它可以防止当一个错误被捕获时该有组件进入一个无限的渲染循环。

    错误传播规则

    • 默认情况下,如果全局的comfig.errorHandler被定义,所有的错误仍会发送它,因此这些错误仍然会向单一的分析服务的地方进行汇报。
    • 如果一个组件的继承或父级从属链路中存在多个errorCaptured钩子,则它们将会被相同的错误逐个唤起。
    • 如果此errorCaptured钩子自身抛出一个错误,则这个新错误和原本被捕获的错误都会发送给全局的config.errorHandler
    • 一个errorCaptured钳子能够返回false以阻止错误继续向上传播。本质上是说“这个错误已经被搞定了且应该被忽略”。它会阻止其它任何会被这个错误唤起的errorCaptured钩子和全局的config.errorHandler

# 选项/资源


# directives

# filters

  • 类型Object

  • 详细

    包含 Vue 实例可用过滤器的哈希表。

  • 参考Vue.filter

# components

  • 类型Object
  • 详细: 包含 Vue 实例可用组件的哈希表。

# 选项/组合


# parent

  • 类型Vue instance

  • 详细

    指定已创建的实例之父实例,在两者之间建立父子关系。子实例可以用this.$parent访问父实例,子实例被推入父实例的$children数组中。

    节制地使用$parent$children- 它们的主要目的是作为访问组件的应急方法。更推荐用 propsevents实现父子组件通信。

# mixins

  • 类型Array<Object>

  • 详细mixins选项接受一个混入对象的数组。这些混入实例对象可以像正常的实例对象一样包含选项,他们将在Vue.extend()里最终选择使用相同的选项合并逻辑合并。举例:如果你的混入包含一个钩子而创建组件本身也有一个,两个函数将被调用。

    Mixin 钩子按照传入顺序依次调用,并在调用组件自身的钩子之前被调用。

  • 示例

    var mixin = {
        created: function () { console.log(1) }
    }
    var vm = new Vue({
        created: function () { console.log(2) },
        mixins: [mixin]
    })
    // => 1
    // => 2
    

# extends

  • 类型Object | Function

  • 详细: 允许声明扩展另一个组件(可以是一个简单的选项对象或构造函数),而无需使用Vue.extend。这主要是为了全球扩展单文件组件。

    这和mixins类似。

  • 示例

    var CompA = { ... }
    
    // 在没有调用 `Vue.extend`的时候继承 CompA
    var CompB = {
      extends: CompA,
      ...
    }
    

# provide / inject

2.2.0 新增

  • 类型

    • provide: Object | () => Object
    • inject: Array<string> | { [key: string]: string | Symbol | Object}
  • 详细

    provideinject主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。

    这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。如果你熟悉 React ,这与 React 的上一文特性很相似。

    provide选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。在该对象中你可以使用 ES2015 Symbols 作为 key,但是只在原生支持SymbolReflect.ownkeys的环境下可工作。

    inject选项应该是:

    • 一个字符串数组,或
    • 一个对象,对象的key是本地的绑定名,value 是:
      • 在可用的注入内容中搜索用的key(字符串或 Symbol),或
      • 一个对象,该对象的:
        • from属性是在可用的注入内容中搜索用的key(字符串或Symbol)
        • default属性是降级情况下使用的 value

    提示:provideinject绑定并不是可响应的。这是刻意为之的。然而如果你传入一个可监听的对象,那么其对象的属性还是可响应的。

  • 示例

    // 父级组件提供 'foo'
    var Provider = {
        provide: {
            foo: 'bar'
        },
        // ...
    }
    
    // 子组件注入 ‘foo'
    var Child = {
        inject: ['foo'],
        created () {
            console.log(this.foo) // =>"bar"
        }
        // ...
    }
    

    利用 ES2015 Symbols、函数 provide和对象 inject

    const s = Symbol()
    
    const Provider = {
        provide () {
            return {
                [s]: 'foo'
            }
        }
    }
    
    const Child = {
        inject: { s },
        // ...
    }
    

    接下来2个例子只工作在 Vue 2.2.1 或更高版本。低于这个版本时,注入的值会在propsdata初始化之后得到。

    使用一个注入的值作为一个属性的默认值:

    const Child = {
        inject: ['foo'],
        props: {
            bar: {
                default () {
                    return this.foo
                }
            }
        }
    }
    

    使用一个注入的值作为数据入口:

    const Child = {
        inject: ['foo'],
        data () {
            return {
                bar: this.foo
            }
        }
    }
    

    在 2.5.0+ 的注入可以通过设置默认值使其变成可选项:

    const Child = {
        inject: {
            foo: { default: 'foo'}
        }
    }
    

    如果它需要从一个不同名字的属性注入,则使用from来表示其源属性:

    const Child = {
        inject: {
            foo: {
                from: 'bar',
                default: 'foo'
            }
        }
    }
    

    与prop 的默认值类似,你需要对非原始值使用一个工厂方法:

    const Child = {
        inject: {
            foo: {
                from: 'bar',
                default: () => [1,2,3]
            }
        }
    }
    

# 选项/其它


# name

  • 类型string

  • 限制:只有作为组件选项时起作用。

  • 详细

    允许组件模板递归地调用自身。注意,组件在全局用Vue.component()注册时,全局 ID 自动作为组件的 name。

    指定name选项的另一个好处是便于调试。有名字的组件有更友好的警告信息。另外,当在有 vue-devtools,未命名组件将显示成<AnonymousComponent>,这没有语义。通过提供name选项,可以获得更有语义信息的组件树。

# delimiters

  • 类型Array<string>

  • 默认值[", "]

  • 限制:这个选项只在完整构建版本中的浏览器内编译时可用。

  • 详细: 改变纯文本插入分隔符。

  • 示例

    new Vue({
        delimiters: ['${','}']
    })
    
    // 分隔符变成了 ES6 模板字符串的风格。
    

# functional

  • 类型boolean
  • 详细: 使组件无状态(没有 data)和无实例(没有this上下文)。他们用一个简单的render函数返回虚拟节点使他们更容易渲染。
  • 参考函数式组件 (opens new window)

# model

2.2.0 新增

  • 类型{ prop?: string, event?: string }

  • 详细: 允许一个自定义组件在使用v-model时定制 prop 和 event。默认情况下,一个组件上的v-model会把value用作 prop 且把 input用作 event,但是一些输入类型比如单选框和复选框按钮可能想使用valueprop来达到不同的目的。使用model选择可以回避 情况产生的冲突。

# inheritAttrs

2.4.0 新增

  • 类型boolean

  • 默认值true

  • 详细: 默认情况下父作用域的不被认作 props 的特性绑定(attribute bindings)将会“回退”且作为普通的HTML特性应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时,这可能不会总是符合预期行为。通过设置inheritAttrsfalse,这些默认行为将会被去掉。而通过(同样是2.4新增的)实例属性$attrs可以让这些特性生效,且可以通过v-bind显性的绑定到非根元素上。

    注意:这个选项不影响classstyle绑定。

# comments

2.4.0 新增

  • 类型boolean
  • 默认值false
  • 限制:这个选项只在完整构建版本中的浏览器内编译时可用。
  • 详细: 当设为true时,将会保留且渲染模板中的HTML注释。默认行为是舍弃它们。

# 实例属性

# vm.$data

# vm.$props

2.2.0 新增

  • 类型Object
  • 详细: 当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象属性的访问。

# vm.$el

  • 类型Element
  • 只读
  • 详细: Vue 实例使用的根 DOM 元素。

# vm.$options

  • 类型object

  • 只读

  • 详细: 用于当前 Vue 实例的初始化选项。需要在选项中包含自定义属性时会有用处:

    new Vue({
        customOption: `foo`
        created: function () {
        	console.log(this.$options.customOption) //=> 'foo'
        }
    })
    

# vm.$parent

  • 类型Vue instance
  • 只读
  • 详细: 父实例,如果当前实例有的话。

# vm.$root

  • 类型Vue instance
  • 只读
  • 详细: 当前组件树的根 Vue 实例。如果当前实例没有父实例,些实例将会是其自己。

# vm.$children

  • 类型Array<Vue instance>
  • 只读
  • 详细: 当前实例的直接子组件。需要注意$children并不保证顺序,也不是响应式的。如果你发现自己正在尝试使用$children来进行数据绑定,考虑使用一个数组配合v-for来生成子组件,并且使用 Array 作为真正的来源。

# vm.$slots

  • 类型{ [name: string]: ?Array<Vnode> }

  • 只读y

  • 详细: 用来访问被插槽分发的内容。每个具名插槽有其相应的属性(例如:v-slot:foo中的内容将会在vm.$slots.foo中被找到)。default属性包括了所有没有被包含在具名插槽中的节点,或v-slot:default的内容。

    Note: v-slot:foo is supported in v2.6+. For older versions, you can use the deprecated syntax.

    在使用渲染函数书写一个组件时,访问vm.$slots最有帮助。

  • 示例

    <blog-post>
    	<template v-slot:header>
       		<h1 >
                About Me
            </h1>
        </template>
    </blog-post>
    
    <p>
        Here's some page content,which will be included in vm.$slot.default, because it's not inside a named slot.
    </p>
    
    <template v-slot:footer>
    	<p>
            Copyright 2019 Evan You
        </p>
    </template>
    
    <p>
       If I have some content down here ,it will also be included in vm.$slot.default.
    </p>
    
    Vue.component('blog-post', {
        render: function (createElement) {
            var header = this.$slot.header
            var body   = this.$slot.default
            var footer = this.$slot.footer
            return createElement('div', [
                createElement('header', header),
                createElement('main', body),
                createElement('footer', footer)
            ])
        }
    })
    
  • 参考

    • <slot>组件
    • 通过插槽分发内容
    • 渲染函数 - 插槽

# vm.$scopedSlots

2.1.0 新增

  • 类型{ [name: string]: props => Array<VNode> | undefined }
  • 只读
  • 详细: 用来访问作用域插槽。对于包括默认slot在内的每一个插槽,该对象都包含一个返回相应 VNode 的函数。 vm.$scopedSlots在使用渲染函数开发一个组件时特别有用。

# vm.$refs

# vm.$isServer

# vm.$attrs

# vm.$listeners

# 实例方法 / 数据

# vm.$watch

# vm.$set

# vm.$delete

# 实例方法 / 事件

# vm.$on

# vm.$once

# vm.$off

# vm.$emit

# 实例方法 / 生命周期

# vm.$mount

# vm.$forceUpdate

# vm.$nextTick

# vm.$destroy

# 指令

# v-text

# v-html

# v-show

# v-if

# v-else

# v-else-if

# v-for

# v-on

# v-bind

# v-model

# v-slot

# v-pre

# v-cloak

# v-once

# 特殊特性

# key

# ref

# is

# slot

# slot-scope

# scope

# 内置的组件

# component

# transition

# transition-group

# keep-alive

# slot

# VNode接口

# 服务端渲染